<template>
  <PageWrapper>
    <div class="n-layout-page-header">
      <a-card :bordered="false" title="权限判断">
        中后台系统，权限事关重要，可能在任意页面都会存在，前端可以通过多种方式来实现权限控制
      </a-card>
    </div>
    <a-card
      :bordered="false"
      title="方法判断"
      class="mt-3 proCard"
      size="small"
      :segmented="{ content: true }"
    >
      <a-space>
        <a-button
          type="primary"
          status="success"
          v-if="hasPermission(['delete_user'])"
          @click="handleDeleteSueeess"
          >有删除用户权限可见</a-button
        >
        <a-button type="primary" status="danger" @click="handleDeleteError"
          >没有删除列表权限</a-button
        >
      </a-space>
    </a-card>
    <a-card
      :bordered="false"
      title="指令判断"
      class="mt-3 proCard"
      size="small"
      :segmented="{ content: true }"
    >
      <a-space>
        <a-button
          type="primary"
          status="danger"
          v-permission="{ action: ['delete_list'], effect: 'disabled' }"
          >没有删除列表权限禁用</a-button
        >
        <a-button type="primary" status="danger" v-permission="{ action: ['delete_list'] }"
          >没有删除列表权限隐藏</a-button
        >
      </a-space>
    </a-card>
    <a-card
      :bordered="false"
      title="组件判断"
      class="mt-3 proCard"
      size="small"
      :segmented="{ content: true }"
    >
      <a-space>
        <Authority :value="['delete_user']">
          <a-button type="primary" status="success" @click="handleDeleteSueeess"
            >有删除用户权限可见</a-button
          >
        </Authority>
        <Authority :value="['delete_list']">
          <a-button type="primary" status="danger" @click="handleDeleteSueeess"
            >没有删除列表权限隐藏</a-button
          >
        </Authority>
      </a-space>
    </a-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { usePermission } from '@/hooks/web/usePermission';
  import { Message } from '@arco-design/web-vue';

  const message = Message;
  const { hasPermission } = usePermission();

  function handleDeleteSueeess() {
    if (hasPermission(['delete_user'])) {
      message.success('恭喜，您拥有该操作权限');
    }
  }

  function handleDeleteError() {
    if (!hasPermission(['delete_list'])) {
      message.warning('抱歉，您没有操作权限');
    }
  }
</script>
